<template>
  <div class="activity-container">
    <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-date-picker
              v-model="queryForm.activity_range"
              type="daterange"
              value-format="yyyy-MM-dd"
              align="right"
              range-separator="至"
              start-placeholder="项目开始日期"
              end-placeholder="项目结束日期"
              unlink-panels
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.search"
              placeholder="请输入搜索内容"
              clearable
              class="search-input"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        width="95"
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="name"
        label="修改人"
        width="120"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="修改时间"
        width="220"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="handler_type_str"
        label="变动类别"
      />
      <el-table-column  align="center" label="详情" idth="320">
        <template #default="{ row }">
          <el-button v-if="row.handler_type===4" type="text"  @click="downloadFile(row)">
            下载文件
          </el-button>
          <el-popover v-else-if="row.handler_type===1 || row.handler_type===2 || row.handler_type===3" placement="bottom" trigger="hover">
            <div class="popover-text-dialog" v-html="row.button_str" />
            <div slot="reference" class="popover-text">
              <div class="popover-text2" v-html="row.button_str" />
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="详情" >
        <template #default="{ row }">
          <el-button
            :disabled="row.is_filed == '是'"
            type="text"
            @click="handleExpenses(row)"
          >
            费用管理
          </el-button>
          <el-button
            :disabled="row.is_filed == '是'"
            type="text"
            @click="showChecks(row.id)"
          >
            验收材料
          </el-button>
          <el-button
            type="text"
            :disabled="row.is_del === 2 || row.is_filed == '是'"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            :disabled="row.is_del === 2 || row.is_filed == '是'"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
          <el-button type="text" @click="handleFiled(row)">
            {{ row.is_filed === '是' ? '解档' : '归档' }}
          </el-button>
          <el-button type="text"  @click="downloadFile(row)">
            下载文件
          </el-button>
          <span></span>
        </template>
      </el-table-column>-->
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!--<edit ref="edit" @fetch-data="fetchData" />-->
  </div>
</template>

<script>
import {
  getList,
  //doDelete,
  //doFiled,
  //getCheckTypes,
  //saveChecks,
} from '@/api/activityCoseLog'
import { upload } from '@/api/common'
//import Edit from './components/ActivityEdit'

export default {
  name: 'Activity',
  components: {
    //Edit
  },
  filters: {
    showTitle(title) {
      return title.replace(/<\/?[^>]*>/g, '')
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      queryForm: {
        page:1,
        limit:10,//条数
        type:'',//操作类型，1.新增，2.删除，3.修改，4.导入
        activity_id:'',//活动id
        date:'', //时间：按格式【2021-01-01 - 2021-02-03】两个格式中间需要加一个空格加-加空格，共三个字符，如 -
        search:'',
        activity_range:'',
        activity_start: '',
        activity_end: '',
      },
      queryForm2: {
        page: 1,
        list_row: 10,
        keyword: '',
        activity_range: null,
        activity_start: '',
        activity_end: '',
      },
      checksVisible: false,
      checkTypes: [],
      currentActivityId: null,
    }
  },
  watch: {
    'queryForm.activity_range'(range) {
      console.log(222,range)
      const [start, end] = range || ['','']
      this.queryForm.activity_start = start
      this.queryForm.activity_end = end
      this.queryForm.date = this.queryForm.activity_start + ' - ' + this.queryForm.activity_end
    },
  },
  created() {
    this.fetchData()
  },
  methods: {
    downloadFile(row) {
      console.log(123123)
      location.href = row.import_file
    },
    setSelectRows(val) {
      this.selectRows = val
    },

    handleSizeChange(val) {
      this.queryForm.limit = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.fetchData()
    },
    queryData() {
      this.queryForm.page = 1
      this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      const { data, total } = await getList(this.queryForm)
      this.list = data
      this.total = total
      this.listLoading = false
    },
    handleSaveChecks() {
      if (!this.validateChecks()) return
      const images = []
      const types = this.checkTypes
      types.forEach((type) => {
        const files = type.fileList
        const typeImages = files.map((file) => file.url).join()
        images.push({
          activity_expenses_id: type.id,
          check_img: typeImages,
        })
      })
      const imagesJson = JSON.stringify(images)
      saveChecks({
        activity_id: this.currentActivityId,
        check_img: imagesJson,
      }).then((res) => {
        this.checksVisible = false
        this.$baseMessage(res, 'success')
      })
    },
    onChecksExceed() {
      this.$baseMessage('最多只能上传 6 张图片哦', 'warning')
    },
    onChecksChange(fileList, index) {
      // 注: fileList 包含全部图片
      const type = this.checkTypes[index]
      // 处理待上传图片
      const formData = new FormData()
      fileList
        .filter((file) => file.raw)
        .forEach((file) => formData.append('file[]', file.raw))
      // 上传图片
      upload(formData).then((res) => {
        // 上传后处理
        const urls = res.url
        type.fileList = [
          ...fileList.filter((file) => !file.raw),
          ...urls.map((url) => ({ url })),
        ]
        this.$set(this.checkTypes, index, type)
      })
    },
    getUploadTypeLabel(type, index) {
      let label = type.project_category
      const num = type.fileList.length
      // label += ` ${index ? `(${num}/6)` : num}`
      label += ` (${num}/6)`
      return label
    },
    validateChecks() {
      const types = this.checkTypes
      for (const type of types) {
        const files = type.fileList
        for (const file of files) {
          if (file.url.startsWith('blob:')) {
            this.$baseMessage('图片上传中，请重试', 'error')
            return false
          }
        }
      }
      return true
    },
    removeCheck(typeIndex, fileIndex) {
      this.checkTypes[typeIndex].fileList.splice(fileIndex, 1)
      this.$forceUpdate()
    },
  },
}
</script>

<style lang="scss" scoped>
.search-input {
  width: 250px;
}

.checks-row {
  display: flex;
  align-items: center;
}

.check-item {
  position: relative;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-position: center;
  background-size: cover;
  border: 1px solid #c0ccda;
  border-radius: 7px;
}

.check-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 0.3s;
}

.check-item:hover .check-mask {
  opacity: 1;
}

.check-delete {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

::v-deep .el-upload--picture-card {
  position: relative;
  width: 100px;
  height: 100px;
}

.check-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popover-text{
  /*overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  word-break: normal;*/
  width: 100%;
  .popover-text2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.popover-text-dialog{
  max-height: 300px;
  max-width: 800px;
  overflow: scroll;
  overflow-x: hidden;
}
// 隐藏滚动条
.popover-text-dialog::-webkit-scrollbar{
  width: 0;
}
</style>
